<template>
  <!--模态窗 单行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="detailKafkaObj.isShow">
      <div class="modal-ctrl-main odd-row-ctrl">
        <div class="modal-title">
          <p>详情</p>
        </div>
        <div class="modal-ctrl-content pre-wrap">
          <pre class="pre-word-wrap">{{JsonData}}</pre>
        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="closeRoleModal">取消</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: "detailKafka",
    props: ["detailKafkaObj"],
    data() {
      return {
        JsonData: {}
      }
    },
    methods: {
      getList () {
        let url = this.Beacon + '/mongoResult/getDataById?id=' +
          this.detailKafkaObj.id +
          '&topic=' +
          this.detailKafkaObj.topic;
        this.s_loading(true)
        this.$axios.get(url).then(res => {
          delete res.data.content.content
          delete res.data.content.id
          this.JsonData = res.data.content
          this.s_loading(false)
        }).catch(err => {
          this.s_loading(false)
          this.s_alert('详情接口错误')
          console.log(err, '详情接口错误')
        })
      },
      //关闭弹窗
      closeRoleModal () {
        this.clearData();
        this.$emit("closeModal");
      },
      clearData () {

      }
    },
    watch: {
      detailKafkaObj: {
        handler(val) {
          if (val.isShow) {
            this.getList()
          }
        },
        deep: true
      }
    }
  }
</script>

<style scoped>
  .pre-wrap {
    max-height: 422px;
    overflow-y: auto;
    margin: 10px 0;
  }
  .pre-word-wrap {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
</style>
